<html>

<head>
    <title>grapecity_spreadJS_demo</title>
    <script src="jquery_3.1.1.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="gc.spread.sheets.excel2013white.14.2.2.css" type="text/css">
    <script src="gc.spread.sheets.all.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.excelio.14.2.2.min.js" type="text/javascript"></script>
    <script src="https://cdn.grapecity.com.cn/spreadjs/scripts/FileSaver.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.resources.zh.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.print.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.pdf.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.charts.14.2.2.min.js" type="text/javascript"></script>
    <script src="v14.js" type="text/javascript"></script>
    <style type="text/css">
        p{
            color: #90156b;
            text-align: center;
        }
        
        #ss{
            width: 100%;
            height: 480px;
        }
    </style>
</head>

<body>
    <p>包含合并单元格的数据绑定</p>
    <div id="ss"></div>
    <script type="text/javascript">
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        var sheet = spread.getActiveSheet();
        var data = {
            name: 'Jones',  
            region: 'East',
            sales: [
        	    { orderDate: '1/6/2013', item: 'Pencil', units: 95, cost: 1.99 },
            	{ orderDate: '4/1/2013', item: 'Binder', units: 60, cost: 4.99 },
        	    { orderDate: '6/8/2013', item: 'Pen Set', units: 16, cost: 15.99 }
            ]};
        var tableColumns = [], 
        	names = ['orderDate', 'item', 'units', 'cost'],
        	labels = ['Order Date', 'Item', 'Units', 'Cost'];
        var table = sheet.tables.add('tableRecords', 0, 0, 1, 8);
        table.autoGenerateColumns(false);
        var range = table.range();
        var row = range.row;
        var col = range.col;
        var rowCount = range.rowCount;
        var colCount = range.colCount;
        
        for(var i=0;i<colCount;i++){
           if(i%2 == 0){
        	   var tableColumn = new GC.Spread.Sheets.Tables.TableColumn();
        	   tableColumn.name(labels[i/2]);
        	   tableColumn.dataField(names[i/2]);
        	   tableColumns.push(tableColumn);
           }else{
        	   var tableColumn = new GC.Spread.Sheets.Tables.TableColumn();
        	   tableColumns.push(tableColumn);
           }
        };
        table.bindColumns(tableColumns);	
        table.bindingPath('sales');
        source = new GC.Spread.Sheets.Bindings.CellBindingSource(data);
        sheet.setDataSource(source);
        
        var datasourcelength = data.sales.length;
        sheet.tables.resize(table,new GC.Spread.Sheets.Range(row,col,datasourcelength+1,colCount));
        for(var i=0;i<datasourcelength+1;i++){
        	for(var j=0;j<colCount;j++){
        		if(j%2==0){
        			sheet.addSpan(i,j,1,2);
        			var cell = sheet.getCell(i,j);
        			cell.hAlign(GC.Spread.Sheets.HorizontalAlign.center);
        			cell.vAlign(GC.Spread.Sheets.VerticalAlign.center);
        		}
        	}
        }
        
        sheet.bind(GC.Spread.Sheets.Events.RowChanged, function (e, info) {    
            console.log("Row (" + info.row + ")");
        });
    </script>
</body>

</html>